<template>
    <div class="shop-car">

      <x-header class="head-gree"  style="width:100%;position:absolute;left:0;top:0;">
        <span>购物车</span>
        <div slot="right" >
          <span @click="onClickSys">{{headRight}}</span>
        </div>
      </x-header>

      <div v-if="!list">
        <p style="height: 200px; line-height: 200px; text-align: center; color: #C0C4CC;">空空如也！</p>
      </div>

      <card :header="{title: item.shopName }"  v-for="item in list" :key="item.id" v-if="list">
        <div slot="content" >

          <group >
            <cell v-for="val in item.shopList" :key="val.id">
              <div slot="icon">
                <check-icon :value.sync="val.IsCheck"> </check-icon>
              </div>
              <div slot="title" class="list-shop">
                <div>
                  <div class="pic">
                    <img :src="val.url">
                  </div>
                </div>
                <div class="txt">
                  <h4 class="til">{{val.til}}</h4>
                  <div class="color-Danger an-money">￥<span class="money">{{val.money}}</span></div>
                  <div class="an-number">
                    <x-number  v-model="val.number" button-style="round" :min="1" :max="999" ></x-number>
                  </div>
                </div>
              </div>
            </cell>
          </group>
        </div>
      </card>

      <div class="footer" v-if="list">
        <flexbox :gutter="0" style="background-color: #FFFFFF">
          <flexbox-item :span="2">
            <check-icon :value.sync="AllCheck"><span style="color: #C0C4CC; font-size: 0.6em; ">全选</span> </check-icon>
          </flexbox-item>
          <flexbox-item :span="6" v-if="!IsDele">
            <div style="margin-left: 5px;">
              合计：<strong>￥{{allmaney}}</strong>
            </div>
          </flexbox-item>
          <flexbox-item :span="4" v-if="!IsDele">
            <x-button class="no-border-radius" :gradients="['#FF9500','#FF5E3A' ]" @click.native="OnOrder">去结算</x-button>
          </flexbox-item>
          <flexbox-item :span="10" v-else>
            <div style="height: 44px; line-height: 44px; padding-right: 10px; text-align: right;">
              <x-button mini plain type="warn" class="an-border-radius" @click.native="DeleStor">删除</x-button>
            </div>

          </flexbox-item>
        </flexbox>
      </div>

    </div>
</template>

<script>
  const defList = [
    {
      shopId:1,
      shopName:'叶麻店',
      shopList:[
        {
          id:'1',
          til:'华硕(ASUS)PRIME B360M-D 大师系列 主板(Intel B360/LGA',
          money:899,
          url:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2410630611,2662367772&fm=26&gp=0.jpg',
        }
      ]
    }
  ];

  import {XHeader,Card,Cell,Group,CheckIcon ,XNumber,Flexbox, FlexboxItem, XButton   } from 'vux'
  import {isEmptyValue,returnFloat} from '@/utils/auth'
    export default {
        name: "shop-car",
      components:{
        XHeader,
        Card,
        Cell,
        Group,
        CheckIcon,
        XNumber,
        Flexbox,
        FlexboxItem,
        XButton,
      },
      data(){
          return{
            AllCheck:false,
            roundValue:1,
            list:[],
            allmaney:0,
            IsDele:false,
            headRight:'管理',
          }
      },
      watch:{
        '$store.state.appdata.shopCarNum':{
          handler(nd,od){
            this.lound();
          },
          deep: true
        },
        list:{
          handler(nd,od){
            this.StatisticsNum();
          },
          deep: true
        },
        AllCheck(){
          this.allCheckFun();
        }
      },
      mounted(){
        this.lound();
      },
      methods:{
        lound(){
          this.allmaney = returnFloat(0);
          let nd = this.$store.state.appdata.shopCarNum;
          if(isEmptyValue(nd)){
            this.list = undefined;
          }else{

            if(nd[0].shopList){   //不需要整理数据

              this.list = nd;

            }else{  //整理数据

              let nwd = [];
              nd.forEach((val,index)=>{
                let arry = [];
                let obj;
                for(let i = 0; i<nd.length; i++){
                  if(val.shopId == nd[i].shopId){
                    let Chobj = {
                      id:nd[i].id,
                      til:nd[i].til,
                      money:nd[i].money,
                      url:nd[i].url,
                      number:nd[i].number,
                      IsCheck:false,
                    };
                    arry.push(Chobj);
                    obj = {
                      shopId:val.shopId,
                      shopName:val.shopName,
                      shopList:arry
                    };
                  }
                }

                if(isEmptyValue(arry)){
                  obj = val;
                }
                nwd.push(obj);
              });
              //console.log(uniq(nwd));
              //去重函数
              let arryuniq=function(array){
                let temp = [];
                let index = [];
                let l = array.length;
                for(let i = 0; i < l; i++) {
                  for(let j = i + 1; j < l; j++){
                    if (array[i].shopId === array[j].shopId){
                      i++;
                      j = i;
                    }
                  }
                  temp.push(array[i]);
                  index.push(i);
                }
                return temp;
              };

              this.list = arryuniq(nwd);

            }


          }
          //console.log(nd);

        },
        StatisticsNum(){
          let nd = this.list;
          let allmaney = 0;
          if(!isEmptyValue(nd)){
            nd.forEach((val,index)=>{
              val.shopList.forEach((item,i)=>{
                if(item.IsCheck){
                  allmaney = (item.number * item.money *100 + allmaney*100)/100;
                }
              })
            });
            this.allmaney = returnFloat(allmaney);
          }
        },
        onClickSys(){ //购物车管理
          if(this.IsDele){
            this.IsDele = false;
            this.headRight = '管理';
          }else{
            this.IsDele = true;
            this.headRight = '完成';
          }
        },
        DeleStor(){ //删除
          let nd = this.list;
          if(!isEmptyValue(nd)){
            nd.forEach((val,index)=>{
              val.shopList.forEach((item,i)=>{
                if(item.IsCheck){
                  val.shopList.splice(i,1)
                }
              });
              if(isEmptyValue(val.shopList)){
                nd.splice(index,1)
              }
            });
            //console.log('dele:',nd);
            this.$store.commit('SET_SHOPCARNUM',nd);

          }
        },
        allCheckFun(){
          let nd = this.list;
          if(!isEmptyValue(nd)){
            nd.forEach((val,index)=>{
              val.shopList.forEach((item,i)=>{
                item.IsCheck = this.AllCheck
              })
            });
          }
        },
        OnOrder(){
          this.$router.push({path:'/orderConfirm'})
        },

      }
    }
</script>

<style lang="less" scoped>
  @import "../../styles/anstyle";
.shop-car{
  .list-shop{
    display: flex;
    .pic{
      width: 100px;
      height: 100px;
      margin-right: 10px;
    }
    .txt{
      position: relative;
      .til{
        font-weight: 400;
        .tilelic;
      }
      .an-money{
        position: absolute;
        bottom: 0;
        .money{
          font-size: 21px;
        }
      }
      .an-number{
        position: absolute;
        bottom: -10px;
        right: -15px;
      }
    }
  }

}
  input:focus{
    outline: none;
  }
</style>

<style lang="less">
  .shop-car{
    .weui-panel__hd:after{
      border-bottom: none;
    }
    .weui-cells{
      margin-top: 0;
    }
  }
</style>
